<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div class="home-container">
      <div class="boxcontainer">
        <div class="imgers"></div>
        <!-- <div id="div"></div> -->
        <div class="timers">
          <p style="color: #ffff">
            距离本月考试结束还有<span id="timer"></span>
          </p>
        </div>
        <div class="user-wrap">
          <div style="font-size: 15px; color: red">
            <span>尊敬的考生欢迎登录考试系统，请遵守考试基本规则！</span>
          </div>
        </div>
      </div>

      <div class="test-card">
        <h3 class="test-card-title text-center">初级会计知识问答</h3>
        <div class="test-card-content">
          <div class="test-container">
            <h4>单选题</h4>
            <div id="danxuan"></div>
          </div>
          <div class="test-container">
            <h4>判断题</h4>
            <div id="panduan"></div>
          </div>
          <div class="test-container">
            <h4>多选题</h4>
            <div id="duoxuan"></div>
          </div>
        </div>
      </div>

      <div class="submit-btn">
        <button id="submit">提交</button>
      </div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script>
      function getData() {
        var response = $.ajax({
          url: "/data/data.json",
          async: false,
        });
        var data = JSON.parse(response.responseText);
        return data;
      }

      //  倒计时
      var oSpan = document.querySelector("#timer");
      function tow(n) {
        return n >= 0 && n < 10 ? "0" + n : "" + n;
      }
      function getDate() {
        var oDate = new Date(); //获取日期对象
        var oldTime = oDate.getTime(); //现在距离1970年的毫秒数
        var newDate = new Date("2021/6/30 00:00:00");
        var newTime = newDate.getTime(); //2019年距离1970年的毫秒数
        var second = Math.floor((newTime - oldTime) / 1000); //未来时间距离现在的秒数
        var day = Math.floor(second / 86400); //整数部分代表的是天；一天有24*60*60=86400秒 ；
        second = second % 86400; //余数代表剩下的秒数；
        var hour = Math.floor(second / 3600); //整数部分代表小时；
        second %= 3600; //余数代表 剩下的秒数；
        var minute = Math.floor(second / 60);
        second %= 60;
        var str =
          tow(day) +
          '<span class="time">天</span>' +
          tow(hour) +
          '<span class="time">小时</span>' +
          tow(minute) +
          '<span class="time">分钟</span>' +
          tow(second) +
          '<span class="time">秒</span>';
        oSpan.innerHTML = str;
      }
      getDate();
      setInterval(getDate, 1000);

      function renderDom(testData) {
        var danxuanHtml = "",
          duoxuanHtml = "",
          panduanHtml = "";
        $.each(testData.danxuan, function (index, item) {
          danxuanHtml +=
            "<div class='test-component' data-valid='" +
            item.da +
            "'><div class='test-title'>" +
            item.tm +
            "</div><div class='test-content'><ul>";
          $.each(item.xx, function (index, item2) {
            danxuanHtml +=
              "<li class='test-item'>" +
              "<input type='radio' data-type='radio' name='" +
              item2.name +
              "' id='" +
              item2.name +
              index +
              "' value='" +
              item2.answer +
              "' />" +
              "<label for='" +
              item2.name +
              index +
              "'>" +
              item2.label +
              "</label></li>";
          });
          danxuanHtml += "</ul></div></div>";
        });
        $("#danxuan").html(danxuanHtml);

        $.each(testData.panduan, function (index, item) {
          panduanHtml +=
            "<div class='test-component' data-valid='" +
            item.da +
            "'><div class='test-title'>" +
            item.tm +
            "</div><div class='test-content'><ul>";
          $.each(item.xx, function (index, item2) {
            panduanHtml +=
              "<li class='test-item'>" +
              "<input type='radio'data-type='radio' name='" +
              item2.name +
              "' id='" +
              item2.name +
              index +
              "' value='" +
              item2.answer +
              "' />" +
              "<label for='" +
              item2.name +
              index +
              "'>" +
              item2.label +
              "</label></li>";
          });
          panduanHtml += "</ul></div></div>";
        });
        $("#panduan").html(panduanHtml);

        $.each(testData.duoxuan, function (index, item) {
          duoxuanHtml +=
            "<div class='test-component' data-valid='" +
            item.da +
            "'><div class='test-title'>" +
            item.tm +
            "</div><div class='test-content'><ul>";
          $.each(item.xx, function (index, item2) {
            duoxuanHtml +=
              "<li class='test-item'>" +
              "<input type='checkbox' data-type='checkbox' name='" +
              item2.name +
              "' id='" +
              item2.name +
              index +
              "' value='" +
              item2.answer +
              "' />" +
              "<label for='" +
              item2.name +
              index +
              "'>" +
              item2.label +
              "</label></li>";
          });
          duoxuanHtml += "</ul></div></div>";
        });
        $("#duoxuan").html(duoxuanHtml);
      }

      function bindEvent() {
        var inputs = $("input");
        $.each(inputs, function (index, ele) {
          $(ele).on("change", function (e) {
            var type = $(this).data("type");
            var val = $(this).val();
            if (type === "radio") {
              $(this)
                .parents("li")
                .css({
                  backgroundColor: "aquamarine",
                })
                .siblings()
                .css({
                  backgroundColor: "white",
                });
              $(this).parents(".test-component").attr({
                "data-answer": val,
              });
            } else if (type === "checkbox") {
              var checked = $(this).is(":checked");
              if (checked) {
                $(this).parents("li").css({
                  backgroundColor: "aquamarine",
                });
              } else {
                $(this).parents("li").css({
                  backgroundColor: "white",
                });
              }
              var str = "";
              var checkboxs = $(this)
                .parents("ul")
                .find("input[type=checkbox]");
              $.each(checkboxs, function (index, item) {
                var checked = $(item).is(":checked");
                if (checked) {
                  str += $(item).val();
                }
              });
              $(this).parents(".test-component").attr({
                "data-answer": str,
              });
            }
          });
        });
        $("#submit")
          .off("click")
          .on("click", function () {
            $.each($(".tips"), function (index, ele) {
              $(ele).remove();
            });
            var component = $(".test-component");
            var len = $(".test-component").length;
            var result = $(".test-component[data-answer]").length;
            var shengyu = len - result;
            if (shengyu > 0) {
              var confirmResult = confirm(
                "还有" + shengyu + "道题没完成，确定提交吗？"
              );
              if (confirmResult) {
                $.each(component, function (index, item) {
                  var answer = $(item).attr("data-answer");
                  var valid = $(item).attr("data-valid");
                  var html =
                    "正确答案：" +
                    valid +
                    "     " +
                    "您选择的答案：" +
                    (!!answer ? answer : "空");
                  if (answer === valid) {
                    $(item).append(
                      "<div class='tips text-green'>" + html + "</div>"
                    );
                  } else {
                    $(item).append(
                      "<div class='tips text-red'>" + html + "</div>"
                    );
                  }
                });
              }
            }
          });
      }
      $(document).ready(function () {
        var testData = getData();
        renderDom(testData);
        bindEvent();
      });
    </script>
  </body>
</html>
